<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <link href="/imgs/favicon.ico" rel="shortcut icon">

    <link rel="stylesheet" href="/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
    <script>
        $(function () {
            $("#login").click(function () {
                var psd = md5($("#password").val());
                $("#psd").val(psd);
            })
        })
    </script>

    <style>
        body{
            list-style: none;
            background: radial-gradient(ellipse at bottom,
            #1b2735 0, #090a0f 100%);
        }
        .login-box{
            width: 450px;
            margin: 7% auto;
        }
        .login-logo{
            font-size: 35px;
            text-align: center;
            margin-bottom: 25px;
            font-weight: 300;
        }
        .layui-input-block{
            display: block;
            width: 100%;
            margin-left: 10px;
        }
        .layui-form-label{
            width: 125px;
        }
        .layui-input{
            border-radius: 6px;
            height: 35px;
            width: 64%;
            font-size: 20px;
        }
        .card {
            box-shadow: 0 0 5px rgb(0 0 0 / 13%), 0 5px 5px rgb(0 0 0 / 20%);
            background-color: white;
            padding: 40px;
            overflow: hidden;
            position: absolute;
        }
    </style>
    <style>

        @keyframes scaleDraw {
            /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0% {
                transform: scale(1);
                /*开始为原始大小*/
            }
            25% {
                transform: scale(1.25);
                /*放大1.1倍*/
            }
            50% {
                transform: scale(1);
            }
            75% {
                transform: scale(1.25);
            }
        }
        .cont_img_back_ > img {
            position: absolute;
            width: 950px;
            margin: -15% -80%;
            opacity: 0.4;
            -webkit-animation-name:scaleDraw;
            -webkit-animation-timing-function:ease-in-out;
            /*动画的速度曲线*/
            -webkit-animation-iteration-count:infinite;
            /*动画播放的次数*/
            -webkit-animation-duration:60s;
            /*动画所花费的时间*/
        }

    </style>

    <style>
        .snow {
            margin-top: -250px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            position: fixed;
            filter: drop-shadow(0 0 6px white);
        }
        .mywords
        {
            position: fixed;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            color: #fff;
            font-size: 1.5em;
            line-height: 2em;
            font-weight: 500;
            display: flex;
            flex-wrap: wrap;

        }
        .mywords  span{
            animation: jumpin 0.5s ease-out both;

        }
        @keyframes jumpin {
            from{
                transform: translateY(-20%);
                opacity: 0;
            }
            to{
                transform: translateY(0);
                opacity: 1;
            }
        }

    </style>

    <script>
        $(function () {
            var words=$(".mywords").text().split("");
            $(".mywords").empty();
            words.forEach((w,i)=>{
                $(`<span>${w}</span>`).css({
                    "animation-delay": 0.1*i+'s'
                }).appendTo($(".mywords"));
            });
            for(var i=0;i<200;i++)
            {
                var x=Math.random()*100;
                var y=Math.random()*100;
                var scale=Math.random();
                var opacity=Math.random();
                var t1=Math.random()*20+10;
                var t2=Math.random()*30;

                var o=Math.random()*20-10;
                var x1=x+o;
                var x2=x+o/2;

                $(`<style> @keyframes fall${i} {
            ${y}%{
                transform: translate(${x1}vw, ${y}vh) scale(${scale});
            }
            to{
                transform: translate(${x2}vw,100vh) scale(${scale});
            }
        }
    </style>`).appendTo($("head"));
                $('<div class="snow"></div>')
                    .css({
                        "transform": `translate(${x}vw, -10px) scale(${scale})`,
                        "opacity": opacity,
                        "animation": `fall${i} ${t1}s -${t2}s linear infinite`
                    })
                    .appendTo($("body")).end()

            }
        })
    </script>

    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script src="/js/kawai.js"></script><!--必须在后面-->

</head>
<body style="text-align: center;font-size: 30px">
<div class="login-box">
    <div class="login-logo" style="color: #007bff;">
        <h1>后台登录</h1>
    </div>
    <div class="card">
        <div class="cont_img_back_"> <img src="/imgs/blogs/timg.png" alt="背景图片" /> </div>
        <form class="layui-form" action="/toLogin" method="post">
            <p style="color: red;margin-bottom: 15px;position: relative;"  th:text="${msg}"></p>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input id="username" type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="password" class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input id="password" type="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div>
                    <input id="psd" name="password" hidden>
                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 45px;position: relative;">
                <div style="display: inline;float: left;width: 54%">
                    <input type="text" style="width: 100%" class="layui-input" name="verifyCode" placeholder="请输入验证码" required="true">
                </div>
                <div style="display: inline;float: right">
                    <img id="verify" alt="单击图片刷新！" class="pointer" src="/common/kaptcha"
                         onclick="this.src='/common/kaptcha?d='+new Date()*1"> <!--生成验证码信息传到后端-->
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn layui-btn-normal" href="/" style="float:left;text-decoration: none">返回博客首页</a>
                    <button id="login" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        /*form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });*/
    });

</script>

</body>
</html>